<template>
    <div class="chart-cc-box" :style="{'--rat': showRat, '--ratRight': (showRat == 0 ? 0 : Number(showRat) + Number(0.005)), '--color': color}"></div>
</template>

<script>
    export default {
        data() {
            return {
                showRat: 0
            }
        },
        props: {
            // 彩色占比
            rat: {
                type: Number,
                default: 0
            },
            color: {
                type: String,
                default: '#F0F0F0'
            }
        },
        watch: {
            rat: {
                handler(newVal, oldVal) {
                    if (newVal) {
                        // 需要展示的灰色占比
                        let brr = Number(newVal)
                        if (brr <= 0.01) {
                            this.showRat = 0.01
                        } else {
                            let area = brr < 1 && brr > 0.99 ? 0.99 : brr.toFixed(2)
                            let timer = setInterval(() => {
                                if (Number(area) === Number(this.showRat)) {
                                    clearInterval(timer)
                                    timer = undefined
                                    return
                                }
                                if (area > this.showRat) {
                                    this.showRat = Number(Number(this.showRat) + 0.01).toFixed(2)
                                    return
                                }
                                if (area < this.showRat) {
                                    this.showRat = Number(Number(this.showRat) - 0.01).toFixed(2)
                                    return
                                }
                            }, area * 10)
                        }
                    }
                },
                immediate: true,
            }
        }
    }
</script>

<style lang="scss" scoped>
.chart-cc-box {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--color) 0% calc(var(--rat) * 100%), #F0F0F0 calc(var(--ratRight) * 100%) 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after {
        content: "";
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background-color: #FFFFFF;
    }
}
</style>